<template>
	<view>
		<view class="list" v-for="(item,index) in userList">
			<view class="flex_col" :class="{'active':pickerUserIndex==index}"
			 :key="index" :data-index="index">
				<view class="flex_grow">
					<view class="flex_col">
						<view class="flex_grow">{{item.proName}}</view>
					</view>
					<view class="info">{{item.endtime}}</view>
					<view class="info">费用:{{item.fund}}</view>
					<view class="info">{{item.schedule}}</view>
					<view style="margin-left: 70%;margin-top: -60px;" @click="sheji(item.designerId)">评价设计师</view>
					<br>
					<view style="margin-left: 70%;" @click="shigong(item.consId)">评价施工团队</view>
				</view>
				
				
			</view>
			
		</view>
		<view class="shade" v-show="showShade" @tap="hidePop">
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userList: [],
				/* 窗口尺寸 */
				winSize: {},
				/* 显示遮罩 */
				showShade: false,
				/* 显示操作弹窗 */
				showPop: false,
				/* 弹窗按钮列表 */
				popButton: ["标为关注", "置顶聊天", "删除该聊天"],
				/* 弹窗定位样式 */
				popStyle: "",
				/* 选择的用户下标 */
				pickerUserIndex: -1
			}
		},
		onLoad() {
			this.getListData();
			this.getWindowSize();

			// #ifdef H5
			document.onLong = function(e) {
				var e = e || window.event;
				e.preventDefault();
			};
			// #endif
		},
		methods: {
			/* 列表触摸事件 */
			sheji(designerid) {
				
               uni.navigateTo({
               	 url:'../PersonalCenter/index1?designerId='+designerid,
               })
				
			},
			shigong(consid){
				uni.navigateTo({
					 url:'../PersonalCenter/index2?consId='+consid,
				})
			},
			/* 获取列表数据 */
			getListData() {
				let list = [];
				if(uni.getStorageSync("myCount").userId==null){
					uni.showToast({
						icon:"loading",
						title:"请先登录",
						duration:500
					})
					return
				}
				else{
				uni.request({
                   url:"http://"+global.address+":8081/project/comproject/"+uni.getStorageSync("myCount").userId+"/完成",
				   method:"GET",
				  success(res) {
				  for(var i=0;i<res.data.length;i++){
					  var c=res.data;
					  console.log(c);
					  list.push({
						  designerId:c[i].designerId,
						  consId:c[i].consId,
						  proName:c[i].proName,
						  endtime:c[i].endtime,
						  fund:c[i].fund,
						  schedule:c[i].schedule
					  })
				  }
											
											
			   }
			})
			}
				this.userList = list;
			},
			/* 获取窗口尺寸 */
			getWindowSize() {
				uni.getSystemInfo({
					success: (res) => {
						this.winSize = {
							"witdh": res.windowWidth,
							"height": res.windowHeight
						}
					}
				})
			},
			/* 长按监听 */
			/* 隐藏弹窗 */
			hidePop() {
				this.showPop = false;
				this.pickerUserIndex = -1;
				setTimeout(() => {
					this.showShade = false;
				}, 250);
			},
			/* 选择菜单 */
			
		}
	}
</script>

<style scoped lang="scss">
	/* 列式弹性盒子 */
	.flex_col {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		align-content: center;
	}

	/* 弹性盒子弹性容器 */
	.flex_col .flex_grow {
		width: 0;
		-webkit-box-flex: 1;
		-ms-flex-positive: 1;
		flex-grow: 1;
	}

	.flex_row .flex_grow {
		-webkit-box-flex: 1;
		-ms-flex-positive: 1;
		flex-grow: 1;
	}

	/* 弹性盒子允许换行 */
	.flex_col.flex_wrap {
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	/* 列表 */
	.list {
		background-color: #fff;
		font-size: 28upx;
		color: #333;
		user-select: none;
		touch-callout: none;

		&>view {
			padding: 24upx 30upx;
			position: relative;

			&:active,
			&.active {
				background-color: #f3f3f3;
			}

			&>view {
				line-height: 40upx;

				.time,
				.info {
					color: #999;
					font-size: 24upx;
				}

				.time {
					width: 150upx;
					text-align: right;
				}

				.info {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}

		&>view:not(:first-child) {
			margin-top: 1px;

			&::after {
				content: '';
				display: block;
				height: 0;
				border-top: #CCC solid 1px;
				width: 620upx;
				position: absolute;
				top: -1px;
				right: 0;
				transform:scaleY(0.5);	/* 1px像素 */
			}
		}
	}

	/* 遮罩 */
	.shade {
		position: fixed;
		z-index: 100;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		-webkit-touch-callout: none;

		.pop {
			position: fixed;
			z-index: 101;
			width: 200upx;
			box-sizing: border-box;
			font-size: 28upx;
			text-align: left;
			color: #333;
			background-color: #fff;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
			line-height: 80upx;
			transition: transform 0.15s ease-in-out 0s;
			user-select: none;
			-webkit-touch-callout: none;
			transform: scale(0, 0);

			&.show {
				transform: scale(1, 1);
			}

			&>view {
				padding: 0 20upx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				user-select: none;
				-webkit-touch-callout: none;

				&:active {
					background-color: #f3f3f3;
				}
			}
		}
	}
</style>
